<template>
  <a-modal :title="title" :visible="visible" :footer="null" width="60%" @cancel="reset">
    <a-form labelAlign="left" :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="48">
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="选择品牌" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-select
              v-decorator="['brand', { rules: [{ required: true, message: '请选择品牌' }] }]"
              placeholder="请选择品牌"
              @change="handleSelectChange"
            >
              <a-select-option :value="item.name" v-for="item in brand" :key="item.weid">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="状态" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-switch v-decorator="['status', { valuePropName: 'checked' }]" />
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="门店编码" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input-search
              placeholder="请输入门店编码"
              v-decorator="['code', { rules: [{ required: true, message: '请输入门店编码' }] }]"
              @search="search"
            />
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="门店类型" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-select
              v-decorator="['manageType', { rules: [{ required: true, message: '请选择门店类型' }] }]"
              placeholder="请选择门店类型"
            >
              <a-select-option :value="item.name" v-for="item in storeTypee" :key="item.key">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="品牌名称" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input
              placeholder="请输入品牌名称"
              v-decorator="['name', { rules: [{ required: true, message: '请输入品牌名称' }] }]"
            />
          </a-form-item>
        </a-col>

        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="省" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入省" v-decorator="['province']" />
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="市" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入市" v-decorator="['city']" />
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="区" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入区" v-decorator="['country']" />
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="详细地址" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input-search
              placeholder="请输入详细地址"
              v-decorator="['address', { rules: [{ required: true, message: '请输入详细地址' }] }]"
              @search="getLocation"
            />
            <!-- <a-input
              placeholder="请输入详细地址"
              v-decorator="['address', { rules: [{ required: true, message: '请输入详细地址' }] }]"
            /> -->
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="经纬度" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input
              placeholder="请输入经纬度"
              v-decorator="['longitudeLatitude', { rules: [{ required: true, message: '请输入经纬度' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="经度" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input-number
              placeholder="请输入经度"
              v-decorator="['longitude', { rules: [{ required: true, message: '请输入经度' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="纬度" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input-number
              placeholder="请输入纬度"
              v-decorator="['latitude', { rules: [{ required: true, message: '请输入纬度' }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="电话" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入电话" v-decorator="['tel']" />
          </a-form-item>
        </a-col>
        <a-col :md="formItemCol" :sm="24">
          <a-form-item label="weid" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input
              placeholder="请输入weid"
              v-decorator="['weId', { rules: [{ required: true, message: '请输入weid' }] }]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="24" :sm="24" class="btn-group">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="handleSubmit">提交</a-button>
            <a-button style="margin-left: 50px" @click="reset">取消</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { getStoreInfoByCode, addStore, updateStore } from '@/api/micromall'
import axios from 'axios'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      title: '新增门店',
      formItemCol: 12,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      shop: null,
      storeTypee: [
        {
          name: '直营',
          key: 'zy'
        },
        {
          name: '经销',
          key: 'jx'
        }
      ],
      brand: [
        {
          weid: 2738574294,
          name: 'JNBY'
        },
        {
          weid: 2822095692,
          name: 'less'
        },
        {
          weid: 2504948039,
          name: 'CROQUIS'
        },
        {
          weid: 4,
          name: 'jnby by JNBY'
        },
        {
          weid: 6924108367,
          name: 'Pomme de terre'
        },
        {
          weid: 15,
          name: 'APN73'
        },
        {
          weid: 8348044436,
          name: 'JNBYHOME'
        },
        {
          weid: 11,
          name: 'Outlet'
        },
        {
          weid: 5,
          name: '江南布衣+'
        }
      ],
      form: this.$form.createForm(this)
    }
  },
  watch: {
    editInfo: {
      immediate: true,
      handler: function(n) {
        console.log('编辑：', n)
        if (n != null) {
          this.title = '编辑门店'
          this.$nextTick(() => {
            this.form.setFieldsValue({
              brand: n.brand,
              status: n.status == 'Y',
              code: n.code,
              manageType: n.manageType,
              name: n.name,
              province: n.province,
              city: n.city,
              country: n.country,
              address: n.address,
              tel: n.tel,
              longitudeLatitude: n.longitudeLatitude,
              latitude: n.latitude,
              longitude: n.longitude,
              weId: n.weId
            })
          })
        } else {
          this.$nextTick(() => {
            this.form.setFieldsValue({
              status: true
            })
          })
          this.title = '新增门店'
        }
        console.log(this.form.getFieldsValue())
      }
    }
  },
  methods: {
    async search(code) {
      const re = await getStoreInfoByCode(code)
      // re.data.status = re.data.status == 'Y'
      let address = re.data.province + re.data.country + re.data.city + re.data.address
      const location = await this.getLatAndLng(address)
      const { latitude, longitude } = location
      re.data.longitudeLatitude = longitude + ',' + latitude
      re.data.latitude = latitude
      re.data.longitude = longitude
      this.shop = re.data
      this.$nextTick(() => {
        this.form.setFieldsValue({
          brand: re.data.brand,
          status: re.data.status == 'Y',
          code: re.data.code,
          manageType: re.data.manageType,
          name: re.data.name,
          province: re.data.province,
          city: re.data.city,
          country: re.data.country,
          address: re.data.address,
          tel: re.data.tel,
          longitudeLatitude: re.data.longitudeLatitude,
          latitude: re.data.latitude,
          longitude: re.data.longitude,
          weId: re.data.weId
        })
      })
    },
    getLatAndLng(address) {
      return new Promise((resolve, reject) => {
        axios
          .post('https://jic.jnby.com/open/open-center/open-api/map/baidu/location', {
            address
          })
          .then(re => {
            console.log(re)
            if (re.data.code == 200) {
              let { lat: latitude, lng: longitude } = re.data.data.location
              latitude = parseFloat(latitude).toFixed(6)
              longitude = parseFloat(longitude).toFixed(6)
              let obj = {
                longitudeLatitude: longitude + ',' + latitude,
                latitude,
                longitude
              }
              resolve(obj)
            } else {
              this.$message.warning('搜索地址失败')
              reject({ longitudeLatitude: '', latitude: 0, longitude: 0 })
            }
          })
          .catch(err => {
            this.$message.warning('搜索地址失败')
            console.log(err)
          })
      })
    },
    async getLocation(address) {
      const { country, city } = this.form.getFieldsValue()
      address = city + country + address
      const re = await this.getLatAndLng(address)
      const { longitude, latitude } = re
      this.$nextTick(() => {
        this.form.setFieldsValue({
          longitudeLatitude: longitude + ',' + latitude,
          latitude,
          longitude
        })
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values)
          values.status = values.status ? 'Y' : 'N'
          values.longitude = parseFloat(values.longitude)
          values.latitude = parseFloat(values.latitude)
          this.submit(values)
        }
      })
      //   console.log('submit!', this.form)
    },

    submit(values) {
      const { editInfo } = this
      if (editInfo != null) {
        // values = Object.assign(editInfo,values)
        values['id'] = editInfo.id
        this.editSubmit(values)
      } else {
        values['id'] = this.shop.id
        this.addSubmit(values)
      }
    },
    closeSubmit(msg) {
      this.$message.success(msg, 3)
      this.$emit('close', true)
      this.form.resetFields()
    },
    // 新增
    async addSubmit(values) {
      const re = await addStore(values)
      if (re.code == 200) {
        this.closeSubmit('新增成功')
      }else{
        this.$message.warning(re.msg)
      }
    },
    // 编辑
    async editSubmit(values) {
      const re = await updateStore(values)
      if (re.code == 200) {
        this.closeSubmit('修改成功')
      }
    },
    reset() {
      console.log(23)
      this.form.resetFields()
      this.$emit('close', false)
    },
    handleSelectChange(value, e) {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          weId: e.data.key
        })
      })
    },
    handleOk(e) {},
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    }
  }
}
</script>
<style scoped>
.btn-group {
  display: flex;
  justify-content: center;
}
.ant-input-number {
  width: 100%;
}
</style>
